<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类专题模板</title>
    <!--css style-->
    <link rel="stylesheet" href="../../../css/common.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="index.css?v=99"/>

    <!--外部JS-->
    <script type="text/javascript" src="../../../utils/json2.js"></script>
    <script type="text/javascript" src="../../../utils/jsrender.js"></script>
    <!--内部JS-->
    <script type="text/javascript" src="../../../utils/topdraw.server.js"></script>
    <script type="text/javascript" src="../../../utils/topdraw.config.js"></script>
    <script type="text/javascript" src="../../../utils/topdraw.api.js"></script>
    <script type="text/javascript" src="../../../utils/topdraw.probe.js"></script>
    <script type="text/javascript" src="../../../utils/topdraw.hack.js"></script>
    <script type="text/javascript" src="../../../utils/topdraw.utility.js"></script>
    <script type="text/javascript" src="../../../utils/topdraw.page.js"></script>
    <script type="text/javascript" src="../../../plugs/plug.scroll.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script>
        jsrender.views.converters("imagesFilter",function (images) {
            var imageUrl = "../"+$Config.IMAGE_PLACEHOLDER_VERTICAL;
            var aList = images.list;
            var len = aList.length;
            for( var i = 0; i < len; i++ ){
                //if(aList[i].height > aList[i].width){
                    imageUrl = $Circumstance.IMAGE_BASE_PATH + aList[i].fileUrl;
                    break;
                //}
            }
            return imageUrl;
        });

    </script>
    <script>
        window.$Page=new Page({
            properties : {
                oPageContext:{

                },
                strInitFocusElementId:"common_cell_0",
                iRequestPageIndex:0,
                iCommonTotal:0,
                intervalMarqueeName:{},
                strTemplateId : "",
                iSubjectId:$URL.getQueryStringByName('subjectId'),
                iPageIndex:0,
                promotionName:"",
                aMediaIds : [],
                comEntityList : null
            },
           
            /**
             * 页面初始操作
             */
            run:function(){
                if($Page.oPageContext.scrollX){
                    $Dom.getById("common_area").left($Page.oPageContext.scrollX);
                }
                $Page.UI = "subject"+$Page.iSubjectId;
                $Page.initData();
                jsrender.templates({tempCommon: $Dom.getById("common_cell_template").innerHTML});
                jsrender.templates({tempStyle: $Dom.getById("style_cell_template").innerHTML});
                $Page.getSubjectDetail();
                $Page.getCurrentSubject();//为了探针
                

            },
            initData:function(){
                if ($Page.oPageContext.focusId) {
                    $Page.strInitFocusElementId = $Page.oPageContext.focusId;
                }
                if ($Page.oPageContext.pageIndex){
                    $Page.iPageIndex = $Page.oPageContext.pageIndex;
                }
            },

            getCurrentSubject:function(){//获取当前专题详情信息
                $Network.request({
                    url : $Circumstance.TOPDRAW_API_SERVER+"Subject/List",
                    data : {
                        "subjectId":$Page.iSubjectId,
                        "start":"0",
                        "limit":"1"
                    },
                    desc : "Subject Info",
                    success : function(oJSONResult){
                        if(oJSONResult.resultSet.length){
                            $Page.strTemplateId = oJSONResult.resultSet[0].template_id;
                            var strImgPath = $Utility.getImageByTag(oJSONResult.resultSet[0].images,"bg");
                            if(strImgPath){
                                document.body.style.backgroundImage = "url('"+strImgPath+"')";
                            }
                            
                        }
                    }
                });
            },
            getSubjectDetail:function(){//获取pageURL
                $Network.request({
                    url : $Circumstance.TOPDRAW_API_SERVER+"Subject/ListEntity",
                    data : {
                        'start':0,
                        'limit':1,
                        'subjectId':$Page.iSubjectId
                    },
                    desc : "Subject Detail",
                    success : function(oJSONResult){
                        $Dom.getById("common_area").innerHTML = jsrender.render.tempCommon(oJSONResult.resultSet,{
                            linkClass:"focusable"
                        });
                        $Dom.getById("common_area").width(oJSONResult.resultSet.length*225+10);
                        $Page.checkPageReadyAndInitFocus();
                    }
                });
            },
            stylesInfo:function (data) {
                for(var i = 0; i < data.resultSet.length; i++){
                    var dom = $Dom.getById("style_cell_"+i);
                    dom.css(data.resultSet[i]);
                }
            },
            checkPageReadyAndInitFocus:function(){
                try{
                    if (!$UARecognize.bIsUTBox) {
                        $Focus.collect();
                    }

                    if(!$Focus.bFocusInited){
                        $Focus.init($Page.strInitFocusElementId, $Page.onBeforeFocusChange, $Page.onAfterFocusChange);
                        $Page.comEntityList = new Scroll({
                            elem : $Dom.getById("common_area"),
                            strSlideWay : "horizontal",
                            elRef : $Dom.getById("common_overhidden_box"),
                            iAlighVal : 999,
                            iInitOffset : 99,
                            fnCb : function(){
                                $Page.oPageContext.scrollX = $Dom.getById("common_area").left();
                            }
                        });
                    }
                }catch(err){
                    $Log.error("CheckPageReadyAndInitFocus Error"+err);
                }
            },
            onBeforeFocusChange:function(elPrevious,elTarget, strDirection) {
                if (elPrevious){
                    if (-1 != elPrevious.id.indexOf("common_cell_")){
                        var index = parseInt(elPrevious.id.replace(/common_cell_/,""));
                        $Marquee.stop("$Page.intervalMarqueeName","common_title_"+index,"common_title_second_"+index);
                    }
                    elPrevious.removeClass("focus_cell");
                }
            },
            onAfterFocusChange:function(elPrevious,elTarget,strDirection) {
                if (elTarget){
                    if (-1 != elTarget.id.indexOf("common_cell_")){
                        var index = parseInt(elTarget.id.replace(/common_cell_/,""));
                        $Marquee.start("$Page.intervalMarqueeName","common_title_"+index,"common_title_first_"+index , "common_title_second_"+index,30,30);
                    }
                    elTarget.addClass("focus_cell");
                }
            },
            /**
             * 页面按键 按下
             */
            onPageKeyDown : function(e){

                var bIsContinueBubbling = true;
                var keyCode=0;
                if (typeof(e) === "undefined" || e === 'undefined') {
                    e = window.event;
                }

                if (typeof(e) == "object") {
                    keyCode = e.which ? e.which : e.keyCode;
                }else{
                    keyCode=e;
                }
                switch (keyCode) {
                    case $Constant.KEY["KEY_DOWN"]:
                    case $Constant.KEY["KEY_UT_DOWN"]:
                        var elTarget = $Focus.find($Focus.aFocusTargets,$Focus.iFocusStatus,'down');
                        $Focus.fly(elTarget, "down", 1.0, null);
                        
                        break;
                    case $Constant.KEY["KEY_UP"]:
                    case $Constant.KEY["KEY_UT_UP"]:
                        var elTarget = $Focus.find($Focus.aFocusTargets,$Focus.iFocusStatus,'up');
                        $Focus.fly(elTarget, "up", 1.0, null);
                        break;
                    case $Constant.KEY["KEY_LEFT"]:
                    case $Constant.KEY["KEY_UT_LEFT"]:
                        var elTarget = $Focus.find($Focus.aFocusTargets,$Focus.iFocusStatus,'left');
                        $Page.comEntityList.setAlignValue(99);
                        if(elTarget&&-1 != $Focus.strFocusElementId.indexOf("common_cell_") && -1 != elTarget.id.indexOf("common_cell_")&&elTarget.pageX()-99<0){
                            
                            elTarget = $Page.comEntityList.slideByRow(elTarget);
                            if(elTarget){
                                $Focus.fly(elTarget, "left", $Focus.fScaleFactor, null);
                            }

                        }else{
                            $Focus.fly(elTarget, "left", 1.0, null);
                        }
                    
                        break;
                    case $Constant.KEY["KEY_RIGHT"]:
                    case $Constant.KEY["KEY_UT_RIGHT"]:
                        var elTarget = $Focus.find($Focus.aFocusTargets,$Focus.iFocusStatus,'right');
                        var elCurrent = $Dom.getById($Focus.strFocusElementId);
                        $Page.comEntityList.setAlignValue(999);//
                        if(elTarget&&-1 != $Focus.strFocusElementId.indexOf("common_cell_") && -1 != elTarget.id.indexOf("common_cell_")){
                            elTarget = $Page.comEntityList.slideByRow(elTarget);
                            if(elTarget){
                                $Focus.fly(elTarget, "right", $Focus.fScaleFactor, null);
                            }

                        }else{
                            $Focus.fly(elTarget, "right", 1.0, null);
                        }
                        
                        break;
                    case $Constant.KEY["KEY_PAGE_UP"]:
                    case $Constant.KEY["KEY_O"]:
                        break;
                    case $Constant.KEY["KEY_PAGE_DOWN"]:
                    case $Constant.KEY["KEY_L"]:
                        break;
                    case $Constant.KEY["KEY_BACK"]:
                    case $Constant.KEY["24"]:
                        break;
                    case $Constant.KEY["KEY_OK"]:
                    case $Constant.KEY["KEY_ENTER"]:
                        break;
                }
                return bIsContinueBubbling;
            }
        });
    </script>
</head>
<body>
    <!--jsrender template-->
    <div id="common_cell_template" class="jsrender_template">
        <div id="common_cell_{{:#index}}" class="{{:~linkClass}} common_cell" focusstatus="0" tvlink="{click: [{action: 'changeUI',parameters: {uiName: 'detail',mediaId : '{{:value}}'}}]}" style="background-image: url('{{imagesFilter:images}}');background-size: 100% 100%;">
                <div id="common_title_{{:#index}}" class="common_title">
                    <div  class="common_title_box">
                        <div id="common_title_first_{{:#index}}" class="common_title_first">
                            {{:name}}
                        </div>
                        <div id="common_title_second_{{:#index}}" class="common_title_second">
                            {{:name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="style_cell_template" class="jsrender_template">
        <div id="style_cell_{{:#index}}" class="{{:~linkClass}} style_cell" focusstatus="0" tvlink="{click: [{action: 'changeUI',parameters: {uiName: 'detail',mediaId : '{{:value}}'}}]}" style="background-image: url('{{imagesFilter:images}}');background-size: cover"></div>
    </div>
    <div id="style_area"></div>
    <div id="common_overhidden_box">
        <div id="common_area"></div>
    </div>
</body>
</html>